<template>
  <el-container class="container-layout">
    <el-container>
      <el-header height="80px">
        <!-- 图标 -->
        <span class="iconLogo">
          <!-- <img :src="logoUrl? logoUrl : require('../assets/znlogo.png')" alt=""> -->
          <img src="../assets/znlogo.png" alt="">
        </span>
        <!-- 文字 -->
        <span class="text">镇宁自治县物流信息数据系统 </span>
        <!-- 默认显示 -->
        <span class="user">
          <!-- 用户 -->
          <img :src="imageUrl? imageUrl : require('../assets/timg.jpg')" alt="">
          <span class="name" @click="exitSystem">  {{ username }} <i class="el-icon-switch-button"></i></span>
        </span>
      </el-header>
      <el-container>
          <el-aside width="13%">
            <div class="welcom">
              <div class="logo">
                <img :src="imageUrl? imageUrl : require('../assets/timg.jpg')" alt="">
              </div>
              <span class="welcomeUser"> welcome <br> {{username}}</span>
            </div>
            <!-- 导航菜单 -->
            <el-menu
              router
              style="border-right: none"
              :default-active="$route.path"
              background-color="#2e2e2e"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
            <el-menu-item @click="seeShare">
              <!-- <el-menu-item index="/data"> -->
                <i class="el-icon-s-home"></i>
                <span slot="title">数据展示</span>
                <i class="el-icon-arrow-right rightIcon"></i>
              </el-menu-item>
              <el-menu-item index="/courier" v-if="auth==='1'">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">快递公司管理</span>
                <i class="el-icon-arrow-right rightIcon"></i>
              </el-menu-item>
              <el-menu-item index="/logestics">
                <i class="el-icon-truck"></i>
                <span slot="title">站点物流数据管理</span>
                <i class="el-icon-arrow-right rightIcon"></i>
              </el-menu-item>
              <el-menu-item index="/map">
                <i class="el-icon-location-outline"></i>
                <span slot="title">地图数据管理</span>
                <i class="el-icon-arrow-right rightIcon"></i>
              </el-menu-item>
              <el-menu-item index="/setting" v-if="auth==='1'">
                <i class="el-icon-setting"></i>
                <span slot="title">用户账号管理</span>
                <i class="el-icon-arrow-right rightIcon"></i>
              </el-menu-item>
              <el-menu-item index="/company" v-if="auth==='1'">
                <i class="el-icon-monitor"></i>
                <span slot="title">用户公司管理</span>
                <i class="el-icon-arrow-right rightIcon"></i>
              </el-menu-item>
            </el-menu>
          </el-aside>
        <el-container>
          <el-main>
            <data-show v-if="$route.path=='/'"></data-show>
            <!-- 二级路由对应的组件显示位置 -->
            <router-view v-if="$route.path!=='/'"></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { getItem, removeItem } from '../utils/storage'
export default {
  name: 'home',
  data () {
    return {
      // 用户名称
      userName: '',
      imageUrl: '',
      auth: '',
      logoUrl: ''
    }
  },
  components: {
    DataShow: () => import('../views/dataShow/index')
  },
  created () {
    this.username = getItem('userInfo').username
    this.imageUrl = getItem('userInfo').img
    this.auth = getItem('userInfo').auth
    this.logoUrl = getItem('userInfo').logoImg
  },
  methods: {
    exitSystem () {
      this.$router.push('/login')
      // 清除本地数据
      removeItem('userInfo')
    },
    seeShare () {
      const routeUrl = this.$router.resolve({
        path: '/data'
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>

<style scoped lang='less'>
.container-layout {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  .el-aside {
    border-top: 20px solid #fff;
    padding-top: 10px;
    // background: #002233;
    // background-color:#022668;
    background-color: #2e2e2e;
    padding-left: 10px;
    font-size: 16px;
    .rightIcon{
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(-50%, -50%);
    }
    .welcom{
      font-size: 14px;
      color: #fff;
      margin-left: 10px;
      .logo{
        display: inline-block;
        height: 50px;
        width: 50px;
        border-radius: 25px;
        background-color: #fff;
        vertical-align: middle;
        margin: 20px 20px;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .welcomeUser{
        display: inline-block;
        vertical-align: middle;
        text-align: center;
      }
    }
  }
  .el-header {
    // border-bottom: 3px solid#ddd;
    line-height: 80px;
    position: relative;
    // background: #002233;
    background-color: #2e2e2e;
    color: #ddd;
    .iconLogo {
      display: inline-block;
      height: 60px;
      width: 60px;
      margin-left: 15px;
      img{
        width: 100%;
        height: 100%;
        vertical-align: middle;
        opacity: .8;
      }
    }
    .text {
      vertical-align: middle;
      margin-left: 2%;
      font-size: 36px;
    }
    .user {
      position: absolute;
      right: 40px;
      line-height: 80px;
      vertical-align: middle;
      .name {
      font-style: 16px;
      font-weight: bold;
      vertical-align: middle;
      margin: 0 20px;
      i{
        font-size: 16px;
        margin-left: 5px;
      }
    }
      img{
        width: 30px;
        height: 30px;
        border-radius: 15px;
        vertical-align: middle;
      }
    }
    .exit{
      margin-left: 10px;
      font-size: 16px;
      vertical-align: middle;
    }
  }
  .el-container{
    height: 100%;
  }
  .el-main{
    border: 20px solid #fff;
    background-color: #f4f4f4;
    padding: 0;
    height: 100%;
  }
  .data-show{
    background: url('../assets/echarts/bg.jpg') no-repeat center/cover;
  }
}
</style>
